import React from 'react'
import "./index.css"
import { nanoid } from 'nanoid'

export default function Header({ setTodoList, todoList }) {
  const publishHandle = (e) => {
    // 判断是否点击的回车
    if (e.keyCode !== 13) return
    const publishValue = e.target.value.trim()
    // 判断是否输入的为空
    if (!publishValue) return alert("请输入正确的内容")
    const newTodo = { id: nanoid(), todo: publishValue, done: false }
    setTodoList([newTodo, ...todoList])

    // 清空输入框
    e.target.value = ""
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
